<template>
	<view>
		<view class="seach">
			<view class="seachLeft"><image src="../../static/shopImage/222.png" mode=""></image></view>
			<view class="seachCenter">
				<image src="../../static/images/tb_search.png" mode=""></image>
				<input type="text" value="" placeholder="请输入关键词..." />
			</view>
			<view class="seachRight">完成</view>
		</view>
		<view class="shop">
			<view class="ima" @click="ClickGou(0)"><image :src="imageGou" mode=""></image></view>
			<view class="shopCenter"><image src="../../static/shopImage/timg.jpg" mode=""></image></view>
			<view class="shoptxt">
				<view class="txtone">
					雪纺连衣裙
				</view>
				<view class="txttwo">销量:5427 库存:542</view>
				<view class="txtThree">¥120.00</view>
			</view>
			<view class="jia"   @click="addCar">
				<image src="../../static/shopImage/jia.png" mode=""></image>
			</view>
		</view>
		<view class="shop">
			<view class="ima" @click="ClickGou(1)"><image :src="imageGou" mode=""></image></view>
			<view class="shopCenter"><image src="../../static/shopImage/timg.jpg" mode=""></image></view>
			<view class="shoptxt">
				<view class="txtone">雪纺连衣裙</view>
				<view class="txttwo">销量:5427 库存:542</view>
				<view class="txtThree">¥120.00</view>
			</view>
			<view class="jia"  @click="addCar">
				<image src="../../static/shopImage/jia.png" mode=""></image>
			</view>
		</view>
		<view class="tarbar">
			<image :src="imageGou" mode="" @click="ClickGou(0)"></image>
		    <view class="boxc">
		    	全选
		    </view>
			<view class="box">
				删除
			</view>
		</view>
		
		<!-- 添加购物车 -->
		<view class="addCar" v-show="showCar">
			<view class="addCarTop">
				<view class="">
					规格
				</view>
				<view class="">
					单价
				</view>
				<view class="">
					数量
				</view>
			</view>
			<view class="addCarbot">
				<view class="">
					大码/红色
				</view>
				<view class="box">
					¥120.00
				</view>
				<view class="boxB">
					<stepper style="float: right;" size="small" :min="0" :max="20" @change="changeNum"></stepper>
				</view>
			</view>
			<view class="heji">
				<view class="tet">
					合计:<text>¥365</text>
				</view>
				<view class="but">
					加入购物车
				</view>
			</view>
			<view class="cuo" @click="CloseCuo">
				<image src="../../static/shopImage/cuo.png" mode=""></image>
			</view>
		</view>
					<view class="meng" v-show="meng"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			gou: 0,
			imageGou: '../../static/shopImage/kong.png',
			type: -1,
			meng: false, //蒙层
			showCar:false,//去购物车
		};
	},
	methods: {
		ClickGou(e) {
			if (this.gou == 0) {
				this.gou = 1;
				this.imageGou = '../../static/shopImage/gou.png';
			} else {
				this.gou = 0;
				this.imageGou = '../../static/shopImage/kong.png';
			}
		},
		addCar(){
			this.meng=true,
			this.showCar=true;
			},
		CloseCuo(){
			this.meng=false,
			this.showCar=false;
		}	
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.seach {
	height: 110rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 29rpx 32rpx;
	display: flex;
	.seachLeft {
		padding-top: 5rpx;
		image {
			width: 41rpx;
			height: 33rpx;
		}
	}
	.seachCenter {
		margin-left: 26rpx;
		height: 60rpx;
		width: 520rpx;
		background-color: #eeeeeeff;
		border-radius: 9999rpx;
		display: flex;
		input {
			margin-left: 24rpx;
			height: 100%;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-left: 29rpx;
			margin-top: 16rpx;
		}
	}
	.seachRight {
		padding-top: 5rpx;
		margin-left: 31rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.shop {
	margin-top: 20rpx;
	height: 220rpx;
	background-color: #ffffff;
	overflow: hidden;
	display: flex;
	position: relative;
	.ima {
		margin: 90rpx 30rpx;
		width: 36rpx;
		height: 36rpx;
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
	.shopCenter {
		image {
			width: 140rpx;
			height: 140rpx;
			margin-top: 40rpx;
		}
	
	}
	.shoptxt{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-left: 30rpx;
		.txtone{
			margin-top: 32rpx;
			
		}
		.txttwo{
			margin-top: 28rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
		}
		.txtThree{
			margin-top: 19rpx;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(246,68,68,1);
		}
	}
	.jia{
		position: absolute;
		bottom: 49rpx;
		right: 37rpx;
		image{
			width: 45rpx;
			height: 45rpx;
		}
	}
}
.tarbar{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 97rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	image{
		width: 36rpx;
		height: 36rpx;
		margin: 30rpx;
	}
	.boxc{
		flex: 1;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-top: 30rpx;
	}
	.box{
		width: 230rpx;
		background-color: #F93C45FF;
		color: #FFFFFF;
	  line-height: 97rpx;
	 text-align: center;

	}
}

.meng {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: fixed;
	top: 0;
}

.addCar{
	width: 100%;
	position: relative;
	position: fixed;
	bottom: 0rpx;
	z-index: 2;
	border-radius: 20rpx;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	.addCarTop{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
	}
	.addCarbot{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		.box{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(246,68,68,1);
			position: relative;
			left: 34rpx;
		}
		.boxB{
			margin-top: 32rpx;
			
		}
	}
		
	.heji{
		height: 98rpx;
		background-color: #FFFFFF;
		display: flex;
		.tet{
			flex: 1;
			line-height: 98rpx;
			text-align: center;
			text{
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(249,60,69,1);
			}
		}
		.but{
			width: 295rpx;
			background-color:#F93C45FF;
			color: #FFFFFF;
			font-size:30rpx;
			text-align: center;
			line-height: 98rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
	.cuo{
		position: absolute;
		top:-160rpx;
	    left: 340rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>
